<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="agent_admin_key" content="{{agent_admin_key}}">

    <link rel="icon" href="favicon.ico">

{% raw %}
    <title>Indy Agent {{agent_name}}</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

    <!-- Custom styles for this template -->
    <link href="/res/indy.css" rel="stylesheet">
  </head>

  <body>

    <header id="header">
      <!-- Fixed navbar -->
      <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
            <img id="nav-icon" src="/res/ICON.png" width="50px" height="50px">
          <a class="navbar-brand" href="/">Sovrin</a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarCollapse">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" v-on:click="set_tab('relationships')" href="#">Connections<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Credentials<span class="sr-only">(current)</span></a>
            </li>
          </ul>
        </div>

        <div v-if="initialized" class="nav navbar-nav navbar-right">
          <ul class="navbar-nav mr-auto">
             <li class="nav-item active">
                    <a class="nav-link" href="#">{{agent_name}}</a>
             </li>
             <li class="nav-item active">
                    <button type="button" class="btn btn-outline-primary btn-small navbar-btn"
                            v-on:click="walletdisconnect">Disconnect</button>
             </li>
          </ul>
        </div>
      </nav>
    </header>

    <!-- Begin page content -->
    <main role="main" class="container">

        <!-- credentials page -->
        <div id="credentials" class="tab" v-if="tab_active">
            <p>My Credentials</p>
        </div>


        <!-- wallet signin page -->
        <div id="login" class="tab" v-if="tab_active">
            <form class="form-signin" v-on:submit.prevent="walletconnnect">
                <h2 class="form-signin-heading">Wallet Credentials</h2>
                <label for="inputEmail" class="sr-only">Wallet Name</label>
                <input id="agent_name" v-model="agent_name" type="text" name="name" class="form-control" placeholder="Enter your wallet name" required autofocus>
                <label for="inputPassword" class="sr-only">Passphrase</label>
                <input id="passphrase" v-model="passphrase" type="password" name="passphrase" class="form-control" placeholder="Passphrase" required>
                <input id="agent_init" class="btn btn-lg btn-primary btn-block" type="submit" value="Open and Create"/>
            </form>
            <div class="alert alert-danger" role="alert" v-if="wallet_connect_error">{{wallet_connect_error}}</div>
        </div>

        <!-- relationships page -->
        <div id="relationships" class="tab" v-if="tab_active">
            <!-- Modal -->
            <div class="modal fade" id="generated_invite_modal" tabindex="-1" role="dialog" aria-labelledby="generated_invite_modal_label" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="generated_invite_modal_label">Generated Connection Invitation</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">Invite</span>
                                </div>
                                <input type="text" class="form-control" v-model="generated_invite.invite" id="invite">
                                <span class="input-group-btn">
                                    <button class="btn btn-default" type="button" id="copy-invite" v-on:click="copy_invite">Copy</button>
                                </span>
                            </div>
                            <div id="qrcode-card" class="card">
                                <div class="card-header">Invite QR</div>
                                <div class="card-block">
                                    <canvas id="qrcode"></canvas>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="receive_invite_modal" tabindex="-1" role="dialog" aria-labelledby="receive_invite_modal_label" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="receive_invite_modal_label">Receive Invite</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">Invite</span>
                                </div>
                                <input type="text" class="form-control" v-model="receive_invite_info.invite" id="request_invite">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button id="generate_invite" v-on:click="receive_invite" type="button" class="btn btn-primary" data-dismiss="modal">Receive Invite</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="add_static_connection_modal" tabindex="-1" role="dialog" aria-labelledby="add_static_connection_modal_label" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="add_static_connection_modal_label">Add Static Connection</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">Label</span>
                                </div>
                                <input type="text" class="form-control" v-model="new_static_connection.label"/>
                            </div>
                            <br/>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">DID</span>
                                </div>
                                <input type="text" class="form-control" v-model="new_static_connection.did"/>
                            </div>
                            <br/>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">Public Key</span>
                                </div>
                                <input type="text" class="form-control" v-model="new_static_connection.vk"/>
                            </div>
                            <br/>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">Endpoint (optional)</span>
                                </div>
                                <input type="text" class="form-control" v-model="new_static_connection.endpoint"/>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button id="add_static_connection" v-on:click="add_static_connection" type="button" class="btn btn-primary" data-dismiss="modal">Add</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="staticconnection_created_modal" tabindex="-1" role="dialog" aria-labelledby="new_static_connection_modal_label" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="new_static_connection_modal_label">New Static Connection</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">Label</span>
                                </div>
                                <input type="text" class="form-control" readonly v-model="new_static_connection.label"/>
                            </div>
                            <br/>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">My DID</span>
                                </div>
                                <input type="text" class="form-control" readonly v-model="new_static_connection.my_did"/>
                            </div>
                            <br/>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">My VerKey</span>
                                </div>
                                <input type="text" class="form-control" readonly v-model="new_static_connection.my_vk"/>
                            </div>
                            <br/>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">My Endpoint</span>
                                </div>
                                <input type="text" class="form-control" readonly v-model="new_static_connection.my_endpoint"/>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>

            <nav class="navbar navbar-expand-lg navbar-light bg-light" style="margin-top:2em;">
              <a class="h3 navbar-brand" href="#">Pending Connections</a>
              <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">

                </ul>
                <button type="button" class="btn btn-outline-primary btn-small navbar-btn" v-on:click="generate_invite">Generate Connection Invitation</button>
                <button type="button" class="btn btn-outline-primary btn-small navbar-btn ml-1" data-toggle="modal" data-target="#receive_invite_modal">Receive Invite</button>
              </div>

            </nav>



            <table class="table table-bordered" id="conns-new">
                <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Title</th>
                        <th scope="col">Status</th>
                        <th scope="col">History</th>
                        <th scope="col">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="c in connections">
                        <td>{{ c.connection_key }}</td>
                        <td>{{ c.label }}</td>
                        <td>{{ c.status }}</td>
                        <td>
                            <button type="button" class="btn btn-info" v-on:click="display_history(c)">View</button>
                        </td>
                        <td>
                            <button type="button" class="btn btn-warning" v-if="c.status == 'Invite Received'" v-on:click="send_request(c)">Send Request</button>
                            <button type="button" class="btn btn-warning" v-if="c.status == 'Request Received'" v-on:click="send_response(c)">Send Response</button>
                        </td>
                    </tr>
                </tbody>
            </table>

            <nav class="navbar navbar-expand-lg navbar-light bg-light">
              <a class="h3 navbar-brand" href="#">Pairwise Connections</a>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">

                </ul>
                <button type="button" class="btn btn-outline-primary btn-small navbar-btn" data-toggle="modal" data-target="#add_static_connection_modal">Add Static Connection</button>
              </div>
            </nav>

            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th scope="col">Name</th>
                        <th scope="col">Their DID</th>
                        <th scope="col">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="c in pairwise_connections">
                        <td style="cursor:pointer;" v-on:click="show_connection(c)">{{ c.metadata.label }}</td>
                        <td>did:peer:{{ c.their_did }} </td>
                        <td>

                        </td>
                    </tr>
                </tbody>
            </table>

            <div class="modal fade" id="historyModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Messages history: </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body">
                    <div v-for="h in history_view">
                        <h3>{{h.date}}</h3>
                        <pre class="prettyprint lang-py" id="history_body">{{h.msg}}</pre>
                    </div>

                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>

        </div>

        <!-- relationships page -->
        <div id="connection" class="tab" v-if="tab_active">
            <h3>Connection: {{connection.metadata.label}}</h3>
            <p>My DID: did:peer:{{connection.my_did}}</p>
            <p>Their DID: did:peer:{{connection.their_did}}</p>

            <div id="chatlist">
                <div id="new_message_box">
                    <input type="text" v-model="new_basicmessage"/>
                    <input type="submit" value="Send" v-on:click="send_message()"/>
                </div>
                <div id="message_history" v-for="m in basicmessage_list">

                    <div v-bind:class="{sent_message: m.from == connection.my_did, received_message: m.from == connection.their_did}">
                        <p>{{m.content}}</p>
                        <p class="ts">{{m.sent_time | moment("dddd, MMMM Do h:mm a")}}</p>
                    </div>

                </div>
            </div>
            <div id="trustping">
                <button type="button" class="btn btn-primary" v-on:click="send_trustping()">Send Trust Ping</button>
                <p>{{connection.trustping_state}}</p>
            </div>
            <div id="protocol-discovery">
                <h3>Discovered Protocols</h3>
                <input type="text" v-model="new_query"/>
                <button type="button" class="btn btn-primary" v-on:click="send_query()">Send Query</button>
            </div>

            <code><pre>{{connection.query_state}}</pre></code>

        </div>

    </main>
{% endraw %}
    <footer class="footer">
      <div class="container">
          <span class="text-muted"></span>
      </div>
    </footer>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

    <!-- vue.js development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/es-us.js"></script>
    <script src="/res/vue-moment.min.js"></script>
    <script src="/res/qrious.min.js"></script>

    <script src="res/indy-connector.js"></script>
    <script src="/res/indy-agent.js"></script>
    <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
    <script src="/res/utils.js"></script>

  </body>
</html>
